<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
				<view class="main">
					<view class="main-box">
						<form>
							<view  class="cg-main">
								<view class="">
									<view class="sticky">
						            <view class="cu-form-group">
							             <view class="title">单据类型：　采购入库单</view>
							              <!-- <input class="inpt"  name="input"  v-model="BillNo" ></input> -->
						           </view>
									<view class="cu-form-group"　@tap="open('QS_Picekr_date',0)">
										<view class="title">单据日期：　{{timeData.fulldate}}</view>
										<!-- <view @click="open(1)" class="inpt1">
											<input disabled="true">{{timeData.fulldate}}</input>
										</view> -->
									</view>
									<view class="cu-form-group"　@tap="open('QS_Picekr_date',1)">
										<view class="title">结束日期：　{{timeData1.fulldate}}</view>
									<!-- 	<view @click="open(2)" class="inpt1">
											<input disabled="true">{{timeData1.fulldate}}</input>
										</view> -->
									</view>
	
									<!-- <view class="cu-form-group" @click="supplier">
										<view class="title" >供应商:</view>
							        </view> -->
									<view class="cu-form-group">
									      <view class="title">单　　号：</view>
									      <input class="inpt" placeholder="请输入单号"  name="input"  v-model="BillNo" ></input>
									</view>
									<view class="cu-form-group">
									      <view class="title">供货单位：</view>
									       <input class="inpt" placeholder="请输入供货单位"  name="input"  v-model="Biunit" ></input>
									</view>
									</view>
					<view class="cu-form-group" >
						<button class="cu-btn  stop text-white btn_width" @click="SelBill">查询</button>
						<!-- <input class="inpt" name="input" disabled="true"></input> -->
						<!-- <button class="cu-btn  stop text-white btn_width btn_color" @click="addSelectGoods">上传</button> -->
						
						<button class="cu-btn  stop text-white btn_width" @click="SelectGoods">选择</button>
						<!-- <button class="cu-btn  stop text-white btn_width" @click="toDetail()">选择</button> -->
						<!-- <button class="cu-btn  stop text-white btn_width" @click="selectcheck">全选</button> -->
						<button class="cu-btn  stop text-white btn_width" @click="swits()">样式切换</button>
						<!-- elect -->
					</view>
					</view>

							</view>
						</form>
					</view>
				</view>
				
				<!-- 新版表格home -->
				<view class="orderList" :style="{height: orderListHeight + 'px'}" v-show="switrs == 1">
					<view class="orderNav" :style="{width:tdAllWidth+'px'}">
								
						<text :style="{width:tdWidth[0]+'px'}">序号</text>
						<text :style="{width:tdWidth[1]+'px'}">选择</text>
						<text :style="{width:tdWidth[2]+'px'}">单号</text>
						<text :style="{width:tdWidth[3]+'px'}">日期</text>
						<text :style="{width:tdWidth[4]+'px'}">供货单位</text>
						<text :style="{width:tdWidth[5]+'px'}">仓库</text>
						<text :style="{width:tdWidth[6]+'px'}">业务员</text>
						<!-- <text :style="{width:tdWidth[7]+'px'}">备注</text> -->
					</view>
					<view class="orderLi" :style="{height:orderLiHeight +'px',width:tdAllWidth+'px'}">
						<view class="orderItem" v-for="(item,index) in tableList"  
										 :class="[{'background':!(index%2==0)}]"  :key="index" @click="checktr(index)">
							<view :style="{width:tdWidth[0]+'px'}">{{index+1}}</view>
							<view :style="{width:tdWidth[1]+'px'}">
								<radio  :checked="index == checkindex" @click.stop="radiocheck(index)" />
							</view>
							<view :style="{width:tdWidth[2]+'px'}">{{item.BillNo}}</view>
							<view :style="{width:tdWidth[3]+'px'}">{{timesubstr(item.BillTime)}}</view>
							<view :style="{width:tdWidth[4]+'px'}">{{item.BName}}</view>
							<view :style="{width:tdWidth[5]+'px'}">{{item.stockName}}</view>
							<view :style="{width:tdWidth[6]+'px'}">{{item.EName}}</view>
							<!-- <view :style="{width:tdWidth[7]+'px'}">{{item.Comment}}</view> -->
						</view>
					</view>
				</view>
				<!-- 新版表格end -->
				<!-- 表格home -->
<!-- 				<view style="width: 100%;" v-if="tableList !=''"  v-show="switrs == 1">
					<scroll-view scroll-x>
					
				   
					<table border="1" class="table_list" >
					  <tr>
					    <th>序号</th>
					    <th>选择</th>
					    <th>单号</th>
						<th>日期</th>
						<th>供货单位</th>
						<th>仓库</th>
						<th>业务员</th>
						
					  </tr>
					 
					  <tr v-for="(item,index) in tableList" :key="item.id" @click="checktr(index)">
					    <td>{{ index+1 }}</td>
						<td><radio  :checked="item.ischeck" @click.stop="radiocheck(index)" /></td>
						<td>{{ item.BillNo }}</td>
						<td>{{ timesubstr(item.BillTime) }}</td>
						<td>{{ item.BName }}</td>
						<td>{{ item.stockName }}</td>
						<td>{{ item.EName }}</td>
					
					  </tr>
					
					</table>
						  
				        </scroll-view>
				</view> -->
				<view class="box_list"  style="background-color: #EEEEEE;" v-show="switrs == 2">
					<view v-for="(item,index) in tableList" :key="item.id" @click="checktr(index)"   :class="['item_list',{'item_table':index == homeunfold}] "  >
						<p>单号：{{ item.BillNo }} <span style="position: absolute;right: 10px;top: 5px;">
						<radio  :checked="index == checkindex" @click.stop="radiocheck(index)" /></span></p>
						
						<p>日期：{{timesubstr(item.BillTime)}}</p>
						<p>供货单位：{{ item.BName }}</p>
						<p>仓库：{{ item.stockName }}</p>
						<p>业务员：{{ item.EName }}</p>
						<!-- <p>备注：{{ item.Comment }}</p> -->
						<div class="radius" @click.stop="homeunfolds(index)">
							<!-- <div class="d3" v-if="index != homeunfold"></div>
							<div class="d4" v-else></div> -->
							<span v-if="index != homeunfold">展开</span>
							<span v-else>收起</span>
						</div>
					</view>
				</view>
				<!-- 表格end -->
			</scroll-view>

			<QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date" pickerId="date_1" :dataSet="dateSet"
			 showReset :autoHide="false" contentColor="#33cc33" :lineHeight=".05" @hideQSPicker="hideQSPicker($event)"
			 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />
			<!-- 弹出框home -->
			<view class="clickscrolltop" v-show="istop" @click="clicktop">返回</br>顶部</view>
		
	</view>
	
</template>

<script>
	import allConst from "../../../Json.js"
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue';
	import * as GetApi from '@/syApis/syHttp/Http.js';
	export default {
		data() {
			return {
				isShowGoodsType: 0,
				date: '',
                selectcheckall:1,// 全选
				checklist:-1,
				homeunfold:-1,// 展开
				switrs:2, //主界面风格切换
				timeData: {
					clockinfo: '',
					date: '',
					fulldate: '',
					lunar: '',
					month: '',
					range: '',
					year: ''
				},
				timeData1: {
					fulldate: '',
				},
				isdata:0,//判断是开始日期还是结束日期
				BillNo:"",//单号
				Biunit:'',//供货单位
				//单据类型
				BillType:2,
				IsAdd:0,
				BillDate:"",
				tableList: [],
				checkindex:-1,//单选选中
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']
				},
				orderListHeight: 300,
				orderLiHeight: 260,
				orderList: [],
				tdWidth: [50, 60, 150, 125, 125, 125, 125],
				istop:false,
				setfixeds:false
			}
		},
		components: {
			QSpicker,
			uniIcon,
		}, 
		computed: {
			tdAllWidth() {
				var tdAllWidth = 0;
				this.tdWidth.forEach(item => {
					tdAllWidth += parseFloat(item);
				});
				tdAllWidth += this.tdWidth.length - 1;
				return tdAllWidth;
			}
		},
		onLoad() {
			setTimeout(() => {
				this.showCalendar = true
			}, 350);
		},
		//页面加载完成获取高度
		onReady(){
			var that = this
			uni.getSystemInfo({
			　　success: function(res) { // res - 各种参数
			　	let main = uni.createSelectorQuery().select(".cg-main");
			　　　  　main.boundingClientRect(function(data) { //data - 各种参数
			// 　　　  　console.log("元素的高度"+data.height)  // 获取元素宽度
			        console.log(data)
					 // 剩余的高度
					 // orderListHeight: 300,
					 // orderLiHeight: 260,
					 that.orderListHeight = res.windowHeight - data.height;
					 that.orderLiHeight = (res.windowHeight - data.height) - 40;
					 // that.orderListHeight = res.windowHeight - (6*37);
					 // that.orderLiHeight = (res.windowHeight - (6*37)) - 40;
					 console.log('剩余的高度')
					 console.log(that.orderListHeight)
					 console.log('表格内容的高度')
					 console.log(that.orderLiHeight)
					 // 表格内容的高度
					 console.log((res.windowHeight - data.height) - 40)
			　　    }).exec()
			       }
			});
		},
		onPageScroll(res){
			// console.log(res.scrollTop);//距离页面顶部距离
			var scrolls = res.scrollTop
			var that = this
			uni.getSystemInfo({
			　　success: function(res) { // res - 各种参数
			// 　　    let info = uni.createSelectorQuery().select(".sticky");
			// 　　　  　info.boundingClientRect(function(data) { //data - 各种参数
					 
					 
			// 　　    }).exec()
			that.istop = scrolls>(res.screenHeight+res.screenHeight/2)?true:false
			       }
			});
		},
		created(){
			let date = new Date();
			this.BillDate = GetApi.splitdate(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate());
			//初始化默认赋值今天日期
			this.timeData.fulldate = this.BillDate
			this.timeData1.fulldate = this.BillDate
		},
		methods: {
			//跳转到明细
		checktr:function(e){
				let Detailid =  this.tableList[e]['BillID']
				let BillNo = this.tableList[e]['BillNo']
				let type1 = 1;
				uni.navigateTo({
				    url: '../../Purchasereturn/quote_children/quoteDetail/quoteDetail?id='+Detailid+'&BillNo='+BillNo
				});
			},
			//单选
			radiocheck:function(evt){
				this.checkindex = evt==this.checkindex?-1:evt
			},
			// 选择
			SelectGoods:function(){
				if(this.checkindex == -1){
					GetApi.showTip("请选择单据!");
					return
				}
				console.log('返回的参数')
				console.log(this.tableList[this.checkindex])
				var date = new Date();
				this.tableList[this.checkindex]["BillTime"] = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
				this.$eventHub.$emit('returnedgoods',this.tableList[this.checkindex]);//携带参数返回
				this.$eventHub.$off('returnedgoods');
				uni.navigateBack({
					delta:1
				})
			},
			clicktop:function(){
				uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
					});
				console.log('这是一个点击事件')
				console.log('打印打印')			 
			},
			//是否展开
			homeunfolds:function(e){
				if(this.homeunfold == e){
					this.homeunfold = -1
				}else{
					this.homeunfold = e
				}
			},

			back:function(){
				this.Detail = false
			},
			//取消
			closemodel:function(){
				this.isshow = false
			},
            open(name, type) {
            	this.isdata = type;//赋值给isdata用于判断是开始日期还是结束日期
            	this.$refs[name].show();
            	this.dateName = name;
            },
			confirm(res) {
				// var fulldate = e.detail.fulldate
				// console.log(e.detail.fulldate);
				// console.log('这是一个打印')
				// console.log(this.isdata)
				console.log(res)
				
				var data = GetApi.splitdate(res.data);//处理的日期
				console.log(data)
				// 1是开始日期 2是结束日期
				if(this.isdata == 0){
					// console.log(e)
					this.timeData.fulldate = data
				}else if(this.isdata == 1){
					this.timeData1.fulldate = data
				}
				this.$refs[this.dateName].hide();
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {
			
			},
		
			//显示全部分类
			showType: function() {
				if (this.isShowGoodsType == 0) {
					this.isShowGoodsType = 1;
				} else {
					this.isShowGoodsType = 0;
				}

			},
			//查询
			SelBill(){
				
			    console.log('单据编号')
				console.log(this.BillNo)
				console.log(this.Biunit)
				// return
			    if(this.timeData.fulldate == "" || this.timeData.fulldate==undefined){
					GetApi.showTip("单据时间不能为空")
				}else if(this.timeData1.fulldate == "" || this.timeData1.fulldate==undefined){
					GetApi.showTip("结束时间不能为空")
				}
				else{
					var that = this;
					that.tableList = [] //先清空原来的数据
					let ClientID = uni.getStorageSync("UserCode");
					let CreateName = uni.getStorageSync("UserName");
					let isnullBillNo =  this.BillNo==""?'':  ' and '+"[BillNo] like '%"+this.BillNo+"%'";//如果为空则不传
					let isnullBName =  this.Biunit == ""?'': ' and '+"[BName] like '%"+this.Biunit+"%'";//如果为空则不传
					// ' and '+"BName='"+this.Biunit+"'";
					let data = {
						BillType:2,
						Database:'FastApp',
						SourceBillName:'采购入库单',
						Filter:"[BillTime]>='"+that.timeData.fulldate  +"'●and●[BillTime]<='"+that.timeData1.fulldate+"'"
						+ isnullBillNo+ isnullBName,
					};
					GetApi.Check_Select_Bill_Master(data,function(res){
						  if(res.state){
							   if(res.data.ErrorMsg=="获取登录信息失败"){
								   GetApi.showTip("登录超时");
							   }else if(res.data.ErrorMsg!=""){
								   GetApi.showTip(res.data.ErrorMsg);
							   }else if(res.data.TipsMsg == "OK" && res.data.ResultMsg == ""){
								   GetApi.showTip("查无数据");

							   }else{
								     console.log(res.data.ResultMsg);
								   	// that.tableList = res.data.ResultMsg
									// for(let i in res.data.ResultMsg){
									// 	console.log(i)
									// 	res.data.ResultMsg[i]["ischeck"] = false;//赋值默认不选中
									// 	console.log(res.data.ResultMsg[i])
									// }
									// console.log('这是一个打印')
									// console.log(res.data.ResultMsg)
									that.tableList = res.data.ResultMsg
							   }
						  }else{
							  GetApi.showTip("服务器错误!");
						  }
					});
				}
			},
			// 样式切换
			swits:function(){
				this.switrs = this.switrs == 1?2:1
			},
			  //是否全选  点击后改变状态
			ischecka:function(){
						if(this.ischeckall == false){
							this.ischeckall = true
						}else{
							this.ischeckall = false
						}
							
			 },
			 // 日期截取
			 timesubstr:function(e){
				 return e==""||e==undefined?e:e.substring(0,10)
			 },
			 //保留两位小数
			 toFix:function(evt){
				 if(evt == ""|| evt==undefined){
					 return evt
				 }
				 evt = parseFloat(evt);
				 return evt.toFixed(2)//此处2为保留两位小数
			 }
		}

	}
</script>

<style lang="scss">
	@import url("quote_children.css");
	page {
		background-color: #EEEEEE;
		padding-bottom: 0upx;
		height: 100%;
	}


	.stop {
		background-color: rgb(96, 188, 204) !important;
	}




	.main {
		/* padding-top: 55px; */
		background: #EEEEEE;
	}

	.inpt1 {
		width: 100%;
		text-align: right;
		align-items: center;
		display: flex;
	}

	/* .detail-box {
		padding-top: 40px;
	} */

	view {
		font-size: 28upx;
		line-height: inherit
	}


	/*这个定义动画情况，以及存在时的样式，这个样式会覆盖class里的样式*/
	.mytran-transition {
		transition: all 0.3s ease;
		opacity: 1;
	}

	/* .mytran-enter 定义进入的开始状态 */
	/* .mytran-leave 定义离开的结束状态 */
	.mytran-enter,
	.mytran-leave {
		height: 0;
	}
	.btn_width{
		width: 31%;
	}
	.btn_color{
		background-color: #747182 !important;;
	}
	.background{
		background-color: #fff !important;
	}
	//表格单据
	.orderList {
		width: 100%;
		overflow: auto;
		box-sizing: border-box;
	
		text {
			float: left;
			text-align: center;
			box-sizing: border-box;
			height: 40px;
			line-height: 40px;
			border-right: 1px solid #CCC;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
	
			&:last-child {
				border: none;
			}
		}
	
		.orderNav {
			height: 40px;
			line-height: 40px;
			box-sizing: border-box;
			overflow: hidden;
			border-top: 1px solid #CCC;
			border-left: 1px solid #FFF;
			background: #FFF;
	
		}
	
		.orderLi {
	
			background: #ebebeb;
			overflow: auto;
	
			.orderItem {
				height: 40px;
				line-height: 40px;
				width: 100%;
				border: 1px solid #ebebeb;
				box-sizing: border-box;
				display: table;
				border-bottom: 1px solid #CCCCCC;
	
				view {
					display: inline-block;
					height: 100%;
					line-height: 35px;
					float: left;
					text-align: center;
					border-right: 1px solid #CCC;
					box-sizing: border-box;
					padding-top: 5upx;
					padding-bottom: 5upx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
	
					image {
						width: 60px;
						margin: auto;
						display: table;
					}
	
					&:last-child {
						border: none;
					}
	
				}
			}
		}
	
		.allPrice {
			@extend .orderNav;
			background: rgba(124, 170, 216, 1);
			color: #FFF;
		}
		}
		
</style>
